<template>
  <div class="wrapper" v-bind:class='{selected:props.option.selected}'
       :style="{width:props.option.w*zoom+'px',height:props.option.h*zoom+'px',top:props.option.y*zoom+'px',left:props.option.x*zoom+'px','z-index':props.option.zIndex}"
       @mouseover="handleMouseover"
       @mouseleave="handleMouseleave"
  >
    <div v-if="option.selected && option.typeOption.enableResize">
      <div @mousedown="handleMouseDown($event,option,1,1,-1,-1)" class="resize-handle"
           @click="($event)=>{$event.preventDefault();$event.stopPropagation()}"
           style="cursor: nw-resize;top:-4px;left:-4px;"></div>
      <div @mousedown="handleMouseDown($event,option,0,1,1,-1)" class="resize-handle"
           @click="($event)=>{$event.preventDefault();$event.stopPropagation()}"
           style="cursor: ne-resize;top:-4px;right:-4px;"></div>
      <div @mousedown="handleMouseDown($event,option,0,0,1,1)" class="resize-handle"
           @click="($event)=>{$event.preventDefault();$event.stopPropagation()}"
           style="cursor: se-resize;right:-4px;bottom:-4px;"></div>
      <div @mousedown="handleMouseDown($event,option,1,0,-1,1)" class="resize-handle"
           @click="($event)=>{$event.preventDefault();$event.stopPropagation()}"
           style="cursor: sw-resize;bottom:-4px;left:-4px"></div>
    </div>
    <!--    <div v-if="true">-->
    <!--      &lt;!&ndash;锚点&ndash;&gt;-->
    <!--      <div v-for="(anchor,index) of props.option.anchors" :key="index" class="link-anchor"-->
    <!--           :style='{"top":(anchor.py*100+"%"),"left":(anchor.px*100+"%")}'-->
    <!--           @click="handleAnchorClick" @dragstart="handleAnchorDragstart">-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="component-container" @click="handleClick" @dblclick="handleDoubleClick($event)"
         @mousedown="handleMoveMouseDown">
      <component v-if="component" :option="option" :zoom="props.zoom" :is="component"></component>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, Ref, ref} from "vue";
import {ComponentOption} from "./ComponentOption.ts";

let component: any = null
const props = defineProps<{
  components: any,
  option: ComponentOption,
  zoom: number,
}>();
const emit = defineEmits(['resize', 'select', 'dragStart'])
const x: Ref<number> = ref(0)
const y: Ref<number> = ref(0)
const w: Ref<number> = ref(60)
const h: Ref<number> = ref(60)

function setSize(_w: number, _h: number) {
  w.value = _w;
  h.value = _h;
}

function setPosition(_x: number, _y: number) {
  x.value = _x;
  y.value = _y;
}

function setGeo() {
  x.value = props.option.x
  y.value = props.option.y
  w.value = props.option.w
  h.value = props.option.h
}

x.value = props.option.x
y.value = props.option.y
w.value = props.option.w
h.value = props.option.h

let com: any = props.components[props.option.type].component
component = com
defineExpose({setSize, setPosition, setGeo})


onMounted(() => {

})

/**
 * 鼠标按下时，开始resize
 * @param event 事件
 * @param comp 组件配置
 * @param xFlag x怎么变
 * @param yFlag y怎么变
 * @param wFlag w怎么变
 * @param hFlag h怎么变
 */
function handleMouseDown(event: MouseEvent, componentOption: ComponentOption, xFlag: number, yFlag: number, wFlag: number, hFlag: number) {
  event.preventDefault();
  event.stopPropagation();
  let resizingStartGeo = {x: props.option.x, y: props.option.y, w: props.option.w, h: props.option.h}
  emit('resize', setGeo, componentOption, xFlag, yFlag, wFlag, hFlag, event.screenX, event.screenY, resizingStartGeo)
}

function handleClick(event: MouseEvent) {
  event.preventDefault();
  event.stopPropagation();
  emit('select', props.option)
}

function handleMoveMouseDown(event: MouseEvent) {
  //拖动开始
  event.preventDefault();
  event.stopPropagation();
  if (event.button !== 0) {
    return
  }
  // emit('select', props.option)
  emit('dragStart', event, props.option, setGeo)
}

function handleMouseover() {
  props.option.hover = true
}

function handleMouseleave() {
  props.option.hover = false
}

function handleDoubleClick(event: MouseEvent) {
  //添加一个锚点
  event.stopPropagation();
  if (!props.option.typeOption.enableEditAnchor) return;
  let px = event.offsetX / props.option.w
  let py = event.offsetY / props.option.h
  props.option.addAnchor(px, py);
}
</script>
<style lang="scss" scoped>
.wrapper {
  position: absolute;
  border: 1px rgba(0, 0, 0, 0) solid;

  &:hover {
    border: 1px #ccc solid;
  }

  &.selected {
    .resize-handle {
      display: block;
    }

    border: 1px #ccc solid;
    box-shadow: 0px 0px 5px #888888;
  }

  .component-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0
  }

  .link-anchor {
    position: absolute;
    border: 2px solid rgba(255, 0, 0, 0.6);
    box-sizing: border-box;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
  }
}

.resize-handle {
  position: absolute;
  //display: none;
  width: 4px;
  height: 4px;
  border: 2px #aaa solid;
  background-color: #FFF;
  z-index: 1;
}
</style>
